<template>
  <div ref="pro" class="pro"></div>
</template>


<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 指定图表的配置项和数据
    var myChart = echarts.init(this.$refs.pro);
    var option = {
      title: {
        text: "",
      },
      tooltip: {},
      legend: {},
      //设置布局
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
      xAxis: {
        min: 0,
        max: 100,
        show: false,
        // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
        type: "category",
        show: false,
      },
      series: [
        {
          type: "bar",
          data: [70],
          barWidth: 10,
          showBackground: true,
          //调试背景颜色
          backgroundStyle: {
            color: "#eee",
          },
        },
      ],
      label: {
        position: "right",
        //图文标签内容
        formatter: "|",
        show: true,
      },
    };
    myChart.setOption(option);
    window.addEventListener("resize", () => {
      //图标自适应
      myChart.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.pro {
  width: 100%;
  height: 100%;
}
</style>